<template>
    <!-- 问题：max值是通过异步请求获取的，虽然我们终会获取到max,但是我们不知道什么时候能够拿到， 
        所以，我们可以通过watch属性监听，来监听父组件传递过来的max值，不管watch会被处罚几次，但是最后一次，肯定是一个合法的max值
    -->
    <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="max">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input id="test" class="mui-input-numbox" type="number" value="1"   @change="countChanged" ref="numbox"/>
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script>
//导入数字选择框
import mui from '../../lib/mui/js/mui.min.js';
export default {
    mounted(){
        //初始化数字选择框
        mui(".mui-numbox").numbox();
    },
    methods:{
        countChanged(){
            /* 
            每当文本框的数据被改变，立即就把最新的数据通过事件调用，传递被给父组件 
            子组件通过事件调用将值传给父组件this.$emit('传给父组件的方法名称','传给父组件的参数')
            */
            this.$emit("getcount",parseInt(this.$refs.numbox.value));
            console.log(this.$refs.numbox.value);
        }
    },
    props:['max'],
    watch:{
        //属性监听
        'max':function(newVal,oldVal){
            //调用mui的numbox 的 js API
            mui(".mui-numbox").numbox().setOption('max',newVal);
        }
    }
};
</script>

<style lang="scss" scoped>

</style>